<template>
<div>
    <swiper :options="swiperOption" ref="mySwiper">

        <swiper-slide>
            <router-link to="/productDetail">
                <img src="../../../../../assets/image/home/homeActivity/1.png">
                <p class="p1">被他苏贝苏贝塔素被他书</p>
                <p class="p2">￥100</p>
            </router-link>
        </swiper-slide>
        <swiper-slide>
            <router-link to="/productDetail">
                <img src="../../../../../assets/image/home/homeActivity/1.png">
                <p class="p1">被他苏贝苏贝塔素被他书</p>
                <p class="p2">￥100</p>
            </router-link>
        </swiper-slide>
        <swiper-slide>
            <router-link to="/productDetail">
                <img src="../../../../../assets/image/home/homeActivity/1.png">
                <p class="p1">被他苏贝苏贝塔素被他书</p>
                <p class="p2">￥100</p>
            </router-link>
        </swiper-slide>
        <swiper-slide>
            <router-link to="/productDetail">
                <img src="../../../../../assets/image/home/homeActivity/1.png">
                <p class="p1">被他苏贝苏贝塔素被他书</p>
                <p class="p2">￥100</p>
            </router-link>
        </swiper-slide>
        <swiper-slide>
            <router-link to="/productDetail">
                <img src="../../../../../assets/image/home/choice/3.png">
                <p class="p1">被他苏贝苏贝塔素被他书</p>
                <p class="p2">￥100</p>
            </router-link>
        </swiper-slide>

    </swiper>
    <div style="clear:both"></div>
</div>
</template>

<script>
export default {
    name: "topSwiper",
    data() {
        return {
            swiperOption: {
                autoplay: false,
                slidesPerView: 3.5,
                spaceBetween: 20
            }
        }
    },
    // computed:{
    //     siper(){
    //         return this.$refs.myswiper.swiper
    //     }
    // }
}
</script>

<style scoped>
img {
    width: 100%;
}

p {
    font-size: .4rem;
    text-align: center;
}

.p1 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

}

.p2 {
    color: red
}
</style>
